import React, { useEffect, useState } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import Login from '../views/login/Login'
import Sandbox from '../views/sandbox/Sandbox'
import Home from '../views/sandbox/home/Home'
import Userlist from '../views/sandbox/user-manage/Userlist'
import Rightlist from '../views/sandbox/right-manage/Rightlist'
import Rolelist from '../views/sandbox/right-manage/Rolelist'
import Notfound from '../views/sandbox/notfound/Notfound'
import Userupdate from '../views/sandbox/user-manage/Userupdate'
import Roledelete from '../views/sandbox/right-manage/Roledelete'
import Roleupdate from '../views/sandbox/right-manage/Roleupdate'
import Rightdelete from '../views/sandbox/right-manage/Rightdelete'
import Rightupdate from '../views/sandbox/right-manage/Rightupdate'
import Newslist from '../views/sandbox/news-manage/Newslist'
import Newsadd from '../views/sandbox/news-manage/Newsadd'
import Newsupdate from '../views/sandbox/news-manage/Newsupdate'
import Newspreview from '../views/sandbox/news-manage/Newspreview'
import Newsdraft from '../views/sandbox/news-manage/Newsdraft'
import Newscategory from '../views/sandbox/news-manage/Newscategory'
import Audit from '../views/sandbox/audit-manage/Audit'
import Auditlist from '../views/sandbox/audit-manage/Auditlist'
import Unpublished from '../views/sandbox/publish-manage/Unpublished'
import Published from '../views/sandbox/publish-manage/Published'
import Sunset from '../views/sandbox/publish-manage/Sunset'
import Visitor from '../views/visitor/Visitor'
import Detail from '../views/detail/Detail'
import axios from 'axios'
import { connect } from 'react-redux'
import { Spin } from 'antd'

function Index(props) {
  const [routerList, setRouterList] = useState([]);
  const {isloading} = props;
  const routerMap = {
    '/sandbox/home':<Home/>,
    '/sandbox/user/list':<Userlist/>,
    '/sandbox/user/update':<Userupdate/>,
    '/sandbox/right/rightlist':<Rightlist/>,
    '/sandbox/right/rolelist':<Rolelist/>,
    '/sandbox/right/roleupdate':<Roleupdate/>,
    '/sandbox/right/roledelete':<Roledelete/>,
    '/sandbox/right/rightupdate':<Rightupdate/>,
    '/sandbox/right/rightdelete':<Rightdelete/>,
    '/sandbox/news/list':<Newslist/>,
    '/sandbox/news/add':<Newsadd/>,
    '/sandbox/news/update/:id':<Newsupdate/>,
    '/sandbox/news/preview/:id':<Newspreview/>,
    '/sandbox/news/draft':<Newsdraft/>,
    '/sandbox/news/category':<Newscategory/>,
    '/sandbox/audit/audit':<Audit/>,
    '/sandbox/audit/list':<Auditlist/>,
    '/sandbox/publish/unpublished':<Unpublished/>,
    '/sandbox/publish/published':<Published/>,
    '/sandbox/publish/sunset':<Sunset/>
  }

  useEffect(()=>{
    Promise.all([
      axios.get('/children'),
      axios.get('/rights')
    ]).then(res =>
      setRouterList([...res[0].data, ...res[1].data])
    )
  },[])
  
  const routerJudge = (item) =>{
    return (item.pagepermisson||item.routepermisson) && routerMap[item.key]
  }

  return (
    <div>
      <Spin spinning={ isloading }>
        <BrowserRouter>
            <Routes>
                <Route path='/login' element={<Login/>}/>
                <Route path='/visitor' element={<Visitor/>}/>
                <Route path='/detail/:id' element={<Detail/>} />
                <Route path='/sandbox' element={<Authjudge>   {/* 验证权限 */}
                        <Sandbox>
                        </Sandbox>
                    </Authjudge>}>
                    <Route path='' element={<Navigate to='/sandbox/home'/>}/>
                    {routerList.map(item => {
                      if(routerJudge(item)){
                        return <Route path={item.key} key={item.key} element={routerMap[item.key]} exact/>
                      }
                      else
                        return null
                    })}
                    <Route path='/sandbox/notfound' element={<Notfound/>}/>
                    {routerList.length > 0 && <Route path='*' element={<Navigate to='/sandbox/notfound'/>}/>}
                </Route>
                <Route path='/' element={<Navigate to='/sandbox'/>}/>
            </Routes>
        </BrowserRouter>
      </Spin>
    </div>
  )
}

function Authjudge({children}){
    const isAuth = localStorage.getItem('token');
    return isAuth? children:<Navigate to='/login'/>
}

const mapStateToProps = (state) => {
  return {
    isloading: state.LoadingReducer.isloading
  }
}

export default connect(mapStateToProps) (Index)